<template>
	<div class="gridbar">
		<div>
			<section class="gridbar-content" :class="{ 'gridbar-content-3': datas.col === 3, 'gridbar-content-4': datas.col === 4 }">
				<div class="gridbar-list" v-for="(item, index) in datas.list" :key="index">
					<div class="badge" v-if="item.badge.show == 1" :style="{ color: item.badge.color, background: item.badge.bgColor }">
						{{ item.badge.text }}
					</div>
					<div class="sd-flex sd-image" style="width: 30px; height: 30px; border-radius: 0px">
						<el-image v-if="item.src != ''" :src="STATIC_URL + item.src" fit="cover" class="cover-image" />
						<el-image v-else :src="img" fit="cover" class="cover-image" />
					</div>
					<div class="title" :style="{ color: item.title.color }">{{ item.title.text }}</div>
					<div class="tip" :style="{ color: item.tip.color }">{{ item.tip.text }}</div>
				</div>
			</section>
		</div>

		<slot name="deles" />
	</div>
</template>

<script setup lang="ts" name="gridbar">
import { STATIC_URL } from '/@/utils/config';
import { ref } from 'vue';
import img from '/@/assets/decoration/images/imgs.png';
const name = ref();

const props = defineProps({
	datas: {},
});
</script>

<style scoped lang="scss">
.gridbar {
	position: relative;
	min-height: 50px;
	.gridbar-list {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		position: relative;
		padding: 20px 0 14px;
	}

	.gridbar-image {
		height: 50px;
		width: 50px;
	}

	.gridbar-content-3 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

	.gridbar-content-4 {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}
}

.gridbar-list .badge {
	position: absolute;
	top: 10px;
	left: 50%;
	z-index: 1;
	padding: 0 6px;
	height: 20px;
	line-height: 20px;
	font-size: 12px;
	text-align: center;
	border-radius: 6px 6px 6px 0;
}

.gridbar-list .title {
	height: 16px;
	line-height: 16px;
	margin-top: 8px;
	font-size: 12px;
}
</style>
